<template>
    <div class="avatar-container">
        <el-menu :default-active="activeIndex" :router="true" class="el-menu-demo" mode="horizontal"
            @select="handleSelect">
            <!-- 添加logo -->
            <div class="logo-container">
                <img src="@/assets/user.png" alt="Logo" class="logo-image">
            </div>
            <el-menu-item index="/">首页</el-menu-item>
            <el-menu-item index="/train">刷题</el-menu-item>
            <el-menu-item index="/study">练题</el-menu-item>
            <el-menu-item index="/discuss">生活</el-menu-item>
            <el-menu-item index="/album">图集</el-menu-item>
            <el-menu-item index="/lancoll">语集</el-menu-item>
            <div class="search-container" @click="handleContainerClick">
                <el-input ref="searchInput" v-model="searchQuery" @keyup.enter="performSearch" @blur="handleInputBlur"
                    placeholder="搜索" prefix-icon="el-icon-search" class="search-input"
                    :class="{ 'expand': showInput }" v-show="showInput" clearable>
                </el-input>
                <el-button icon="el-icon-search" circle class="search-button" @click="expandInput" v-if="!showInput">
                </el-button>
            </div>
            <div class="login-number">
                <el-tooltip class="item" effect="light" :content="`连续登录天数：${consecutiveDays}天`" placement="bottom">
                    <el-button icon="el-icon-ship" circle class="bell-button" @click="clickBell"></el-button>
                </el-tooltip>
                <!-- <span>{{ consecutiveDays }}</span> -->
            </div>
            <div class="navigation-bar" ref="navBar">
                <el-badge is-dot class="item">
                    <el-button icon="el-icon-bell" circle class="bell-button" @click="toggleMessageList"></el-button>
                </el-badge>
                <!-- 消息列表 -->
                <div class="message-list" v-if="showMessageList" ref="messageList">
                    <div v-for="(message, index) in messages" :key="index" class="message-item"
                        @click="handleMessageClick(message)">
                        <span class="message-icon"><i :class="message.icon"></i></span>
                        <span class="message-text">{{ message.text }}</span>
                        <span class="message-time">{{ formatTime(message.time) }}</span>
                    </div>
                </div>
            </div>
            <div class="right-section">
                <el-popover visible-arrow="false" placement="right" trigger="click">
                    <div class="personal-menu">
                        <h3 style="margin-left: 10px;">hxiaoyi</h3>
                        <div class="custom-button" @mouseover="hover = true" @mouseleave="hover = false">
                            <i class="el-icon-s-data" style="margin-left: 10px;"></i>
                            <span style="margin-left: 15px;">我的排行</span>
                        </div>
                        <div class="custom-button" @click="perCenterClick" @mouseover="hover = true"
                            @mouseleave="hover = false">
                            <i class="el-icon-s-custom" style="margin-left: 10px;"></i>
                            <span style="margin-left: 15px;">个人中心</span>
                        </div>
                        <div class="custom-button" @click="editClick" @mouseover="hover = true"
                            @mouseleave="hover = false">
                            <i class="el-icon-edit" style="margin-left: 10px;"></i>
                            <a style="margin-left: 15px;" target="_blank">我的编辑</a>
                        </div>
                        <div class="custom-button" @mouseover="hover = true" @mouseleave="hover = false">
                            <i class="el-icon-switch-button" style="margin-left: 10px;"></i>
                            <span style="margin-left: 15px;">退出登录</span>
                        </div>
                    </div>
                    <el-button type="info" icon="el-icon-user" circle slot="reference"></el-button>
                </el-popover>
            </div>
        </el-menu>
    </div>
</template>

<script>
export default {
    data() {
        return {
            consecutiveDays: 5, // 假设这是你存储的连续登录天数
            activeIndex: "",
            restaurants: [],
            state: '',
            timeout: null,
            searchQuery: '',
            showInput: false, // 控制输入框的显示状态
            showMessageList: false, // 控制消息列表的显示与否
            messages: [ // 模拟的消息数据
                { text: '新的评论提醒,可以实现更复杂的功能，例如导航到编辑文章页面', icon: 'el-icon-warning-outline', time: '2024-10-01T12:30:00' },
                { text: '新的点赞通知,可以实现更复杂的功能，例如导航到编辑文章页面', icon: 'el-icon-warning', time: '2024-03-02T14:15:00' },
                { text: '小姨发布了新的文章点击查看！', icon: 'el-icon-info', time: '2024-08-03T16:00:00' },
                { text: '您有新的消息带查看，优惠卷等你拿！点击领取', icon: 'el-icon-question', time: '2024-12-03T16:00:00' },
                { text: '新的评论提醒,可以实现更复杂的功能，例如导航到编辑文章页面', icon: 'el-icon-warning-outline', time: '2024-11-01T12:30:00' },
                { text: '新的评论提醒,可以实现更复杂的功能，例如导航到编辑文章页面', icon: 'el-icon-warning-outline', time: '2024-12-22T12:30:00' },
                { text: '新的评论提醒,可以实现更复杂的功能，例如导航到编辑文章页面', icon: 'el-icon-warning-outline', time: '2024-09-01T12:30:00' },
                { text: '新的评论提醒,可以实现更复杂的功能，例如导航到编辑文章页面', icon: 'el-icon-warning-outline', time: '2024-07-01T12:30:00' },
            ],
        }
    },
    methods: {
        toggleMessageList() {
            this.showMessageList = !this.showMessageList; // 切换消息列表的显示状态
        },
        handleClickOutside(event) {
            const navBar = this.$refs.navBar;
            const messageList = this.$refs.messageList;
            if (navBar && !navBar.contains(event.target) && messageList && !messageList.contains(event.target)) {
                this.showMessageList = false;
            }
        },
        handleMessageClick(message) {
            // 处理消息点击事件
            alert(`点击了消息: ${message.text}`);
        },
        formatTime(timestamp) {
            const now = new Date();
            const messageTime = new Date(timestamp);
            const diff = Math.round((now - messageTime) / 1000); // 计算时间差（秒）

            if (diff < 60) return `${diff}秒前`;
            if (diff < 3600) return `${Math.floor(diff / 60)}分钟前`;
            if (diff < 86400) return `${Math.floor(diff / 3600)}小时前`;
            return `${Math.floor(diff / 86400)}天前`;
        },
        expandInput() {
            this.showInput = true; // 展开输入框
            this.$nextTick(() => {
                this.$refs.searchInput.focus(); // 点击后自动聚焦输入框
            });
        },
        performSearch() {
            console.log('Searching for:', this.searchQuery);
            // 添加搜索逻辑，比如调用 API
        },
        handleContainerClick(event) {
            // 点击容器，判断点击的地方
            if (!this.showInput) {
                this.closeInput(); // 点击输入框外的地方，关闭输入框
            }
        },
        handleInputBlur() {
            // 输入框失去焦点时，视情况隐藏它
            if (!this.searchQuery) {
                this.closeInput();
            }
        },
        closeInput() {
            this.showInput = false; // 隐藏输入框
            this.searchQuery = '';   // 清空输入框内容（可选）
        },
        handleSelect(key, keyPath) {
            this.activeIndex = key;
            console.log(key, keyPath);
        },
        clickBell() {
            // 可以实现更复杂的功能，例如打开通知页面
            console.log('Clicked bell');
        },

        querySearchAsync(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

            clearTimeout(this.timeout);
            this.timeout = setTimeout(() => {
                cb(results);
            }, 3000 * Math.random());
        },
        createStateFilter(queryString) {
            return (state) => {
                return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        perCenterClick() {
            // 可以实现更复杂的功能，例如导航到个人设置页面
            this.$router.push('/about');
        },
        editClick() {
            // 可以实现更复杂的功能，例如导航到编辑文章页面
            // this.$router.push('/edit');
            window.open('/#/edit', '_blank');
        },
    },
    mounted() {
        document.addEventListener('click', this.handleClickOutside);
    },
    beforeDestroy() {
        document.removeEventListener('click', this.handleClickOutside);
    },
    created() {
        // 在组件创建时获取当前路径
        this.activeIndex = this.$route.path;
    }
};
</script>

<style scoped>
.login-number {
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: #66b1ff; */
    padding: 10px;
}
.navigation-bar {
    padding: 10px;
    position: relative;
}

.message-list {
    position: absolute;
    right: 20px;
    padding: 10px;
    /* 确保它从导航条的左边显示 */
    top: 60px;
    /* 根据需要调整下拉列表的位置 */
    width: 450px;
    /* 设定消息列表的宽度 */
    max-height: 300px;
    /* 设定最大高度 */
    overflow-y: auto;
    /* 超出部分可滚动 */
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 10px;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* 添加阴影效果 */
}

.message-item {
    padding-top: 15px;
    padding-bottom: 15px;
    /* margin: 15px; */
    /* 增加内边距 */
    display: flex;
    /* align-items: center; */
    justify-content: space-between;
    /* 让内容两端对齐 */
    cursor: pointer;
    /* 显示为可点击的样式 */
    transition: background-color 0.3s;
    /* 动效 */
    border-radius: 10px;
}

.message-item:hover {
    background-color: #f5f5f5;
    /* 悬停效果 */
}

.message-time {
    font-size: 12px;
    color: #999;
    /* background: #66b1ff; */
    width: 60px;
    display: flex;
    align-items: center;
}

.message-text {
    margin-left: 5px;
    margin-right: 5px;
    font-size: 14px;
    color: #333;
    width: 400px;
    display: flex;
    align-items: center;
}

.message-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.logo-container {
    display: flex;
    align-items: center;
    padding: 0 20px;
}

.logo-image {
    height: 40px;
    width: auto;
}

.el-menu-demo {
    display: flex;
    justify-content: space-between;
    /* 让项均匀分布 */
}

.login-register {
    margin-left: auto;
    /* 右对齐 */
}

.search-container {
    margin-left: 200px;
    /* 右侧留出位置 */
    width: 500px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* 右对齐 */
    position: relative;
    /* background: #66b1ff; */
    /* 使得相对定位，便于点击事件处理 */
}

.search-input {
    width: 0;
    transition: width 1s ease;
    opacity: 0;
    border-radius: 4px;
    margin-right: 10px;
    /* 按钮与输入框之间的间隔 */
}

.search-input.expand {
    width: 250px;
    /* 展开后的宽度 */
    opacity: 1;
    /* 展开时显示 */
}

.search-button {
    margin-right: 15px;
}

.item {
    margin-right: 10px;
}

.avatar-container {
    /* position: fixed;  */
    /* 固定在顶部 */
    top: 0; /* 从顶部开始 */
    right: 0; /* 右对齐 */
    left: 0; /* 左对齐 */
    width: 100%; /* 宽度占满 */
    background-color: #fff; /* 背景色设置为白色 */
    z-index: 999; /* 确保在其他元素之上 */
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
}

.right-section {
    display: flex;
    align-items: center;
    /* margin-right: 10px; */
    /* background-color: aqua; */
}

.personal-menu {
    display: block;
    align-items: center;
}

.custom-button {
    display: flex;
    width: 200px;
    height: 40px;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s;
    /* Element UI的按钮样式，可以根据需要调整 */
    color: #1c1919;
    background-color: #ffffff;
    border-radius: 10px;
}

.custom-button:hover {
    background-color: #f7f7f8;
    /* 鼠标悬停时的背景色 */
}

/* 或者使用Vue的绑定来控制背景色 */
.custom-button[data-hover="true"] {
    background-color: #66b1ff;
    /* 通过Vue的hover变量控制 */
}
</style>
